<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
ul{width:100%; list-style:none;}
img{width:300px; display:block; height:400px; position:absolute;}
li{width:300px; height:400px; background:url(img/1.jpg) no-repeat center; z-index:0; float:left; position:absolute;}
</style>
</head>
<body>
<ul id="ul">
</ul>
</body>
<script>	
	window.onload=main
	function main(){
	zuobiao(37);	
	}
	window.onresize=main;	
	function zuobiao(n){//此函数用于布局页面；首先计算出所有布局对象的坐标，然后创建元素并且设置元素的坐标；布局成功；
		var vwidth=document.documentElement.offsetWidth;
		var ul=document.getElementById('ul');
		ul.innerHTML='';
		var liwidth=300;
		var liheight=400;
		var linum=Math.floor(vwidth/300);
		var hnum=Math.ceil(n/linum);
		var padding=(vwidth-linum*300)/(linum+1)
		var node=[];
		var z=0;
		node[0]=''
		for(var i=1;i<=hnum;i++){
			node[i]=[];
			node[i][0]=''
			for(var j=1;j<=linum;j++){
				node[i][j]={};
				if(i==1&&j==1){
					node[i][j].x=padding;
					node[i][j].y=10;	
					}
				else{
					node[i][j].x=(node[i][j-1].x+liwidth+padding)||(node[i-1][j].x);//根据与设定好的节点对象的坐标关系，分别求出此节点的x和y坐标；
					node[i][j].y=(node[i][j-1].y)||(node[i-1][j].y+liheight+10);
					}
			z++		
			var li=document.createElement('li');
			li.ind=z-1;
			li.left=node[i][j].x+'px';
			li.top=node[i][j].y+'px';
			li.setAttribute('style','background:url(img/'+z+'.jpg) no-repeat center;')
			li.style.left=node[i][j].x+'px';
			li.style.top=node[i][j].y+'px';
			ul.appendChild(li);	
				if(z>=n){
					break;
					}
				}
			}
			move();	
	}
	function move(){//此函数用来获得所有的li并且给这些li添加事件；
			var oli=ul.getElementsByTagName('li');
			for(var i=0;i<oli.length;i++){
				oli[i].onmousedown=function(eve){
					var e=eve||window.event;
					this.offx=e.offsetX;
					this.offy=e.offsetY;
					this.down=true;
					this.style.zIndex=1;//鼠标点击的图片的z-index值最高；让其在屏幕的最上边
					var _this=this;
					document.onmousemove=function(eve){
						var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
						var e=eve||window.event;
						if(_this.down){//如果这个对象的down属性为真则执行移动
						_this.style.left=e.clientX-_this.offx+'px';
						_this.style.top=e.clientY+scrollTop-_this.offy+'px';
							}
						}
					document.onmouseup=function(eve){
						var e=eve||window.event;
						_this.down=false;//首先改变down属性为假
						change(_this)//鼠标松开的时候开始执行change函数
						function change(obj){
							obj.style.zIndex=0;
							for(var i=0;i<oli.length;i++){
								if(i==obj.ind){continue;}
								if(parseInt(oli[i].style.left)+100>parseInt(obj.style.left)&&
								parseInt(oli[i].style.left)-100<=parseInt(obj.style.left)&&
								parseInt(oli[i].style.top)+100>parseInt(obj.style.top)&&
								parseInt(oli[i].style.top)-100<=parseInt(obj.style.top)
								){//如果此图片与某一张图片的坐标容错为100像素；那么就进行更换
									obj.style.left=oli[i].style.left;
									obj.style.top=oli[i].style.top;
									oli[i].style.left=obj.left;
									oli[i].style.top=obj.top;
									obj.left=obj.style.left;
									obj.top=obj.style.top;
									oli[i].left=oli[i].style.left;
									oli[i].top=oli[i].style.top;
									break;
									}
								}
								if(i>=oli.length){//如果没有满足容错条件的li；那么就把此对象还原到原来的位置
									obj.style.left=obj.left;
									obj.style.top=obj.top;
									}
							}
						}
					}
				}
		}
</script>
</html>
